<template>
  <div class="Greade">
    <div class="title-name">
      <v-icon color="#fff"
              style="vertical-align:middle; margin-right:8px">menu</v-icon>
      <span style="font-size:20px;line-hight:24px;vertical-align:middle;color:#fff">太理拾课</span>
    </div>
    <div class="grade">
      <div class="grade-card elevation-10">
        <h4>加权成绩</h4>
        <h1 large>3.52</h1>
        <h5>年级排名:100/993</h5>
        <h5>班级排名:1/31</h5>
      </div>
      <div class="grade-card elevation-10">
        <h4>加权成绩</h4>
        <h1 large>3.52</h1>
        <h5>年级排名:100/993</h5>
        <h5>班级排名:1/31</h5>
      </div>
      <div class="grade-card elevation-10">
        <h4>加权成绩</h4>
        <h1 large>3.52</h1>
        <h5>年级排名:100/993</h5>
        <h5>班级排名:1/31</h5>
      </div>
    </div>
    <main>
      <v-list shaped>
        <v-subheader>课程成绩</v-subheader>
        <v-list-item-group v-model="item"
                           color="primary">
          <v-list-item @click="sheet = !sheet"
                       v-for="(item, i) in items"
                       :key="i">
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </main>
    <div class="text-center">
      <v-bottom-sheet v-model="sheet">
        <v-sheet class="text-center"
                 height="480px">
          <v-btn class="mt-2"
                 text
                 color="red"
                 @click="sheet = !sheet">close</v-btn>
          <v-list class="course-grade">
            <v-list-item v-for="tile in tiles"
                         :key="tile.title"
                         @click="">
              <v-list-item-title>{{ tile.title }}</v-list-item-title>
            </v-list-item>
          </v-list>

        </v-sheet>
      </v-bottom-sheet>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: 'Greade',
      item: 1,
      items: [
        { text: '2017-2018' },
        { text: '2018-2019' },
        { text: '2019-2020' },
        { text: '2020-2021' }
      ],
      sheet: false,
      tiles: [
        { title: 'Keep' },
        { title: 'Inbox' },
        { title: 'Hangouts' },
        { title: 'Messenger' },
        { title: 'Google+' }
      ]
    }
  }

}
</script>

<style scoped>
* {
  margin: 0px;
}
header {
  padding: 10px;
  background-image: '../assets/jpg';
  margin: 0px 0px 10px 0px;
}
header > * {
  color: #fff;
}
.title-name {
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  height: 200px;
  background-color: #4e597c;
}
main {
  height: auto;
  padding: 0px 10px;
  margin-bottom: 70px;
  position: relative;
  top: 300px;
  z-index: 2;
}
span {
  font-size: 12px;
}
.grade {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  width: auto;
  box-sizing: border-box;
  white-space: nowrap;
  z-index: 10;
  padding: 20px;
  /* background: #fff; */
}
.grade::-webkit-scrollbar {
  display: none;
}
.course-grade {
  height: 420px;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
}
.grade-card {
  background-color: #2c2933;
  color: #fff;
  width: 180px;
  display: inline-block;
  box-sizing: border-box;
  margin-right: 20px;
  border-radius: 12px;
  padding: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
}
h4 {
  line-height: 20px;
}
h1[large] {
  line-height: 100px;
  font-size: 60px;
}
h5 {
  line-height: 20px;
}
</style>
